<template>
  <section class="container">
    根组件的计数：{{rootNum}}
    <header>
      <Header></Header>
    </header>
    <div class="main">
      <div class="content">
        <Content></Content>
      </div>
      <div class="sidebar">
        <Sidebar></Sidebar>
      </div>
    </div>
    <footer>
      <Footer></Footer>
    </footer>

  </section>
</template>

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";
import Sidebar from "./components/Sidebar";
export default {
  name: "App",
  data(){
    return{
      rootNum:0
    }
  },
  components:{
    Header,
    Footer,
    Content,
    Sidebar
  },
  methods:{
    addRootNum(){
      this.rootNum++;
    }
  },
  //生命周期函数
  beforeCreate() {
    console.log('App组件创建实例之前自动调用beforeCreate');
  },
  created() {
    console.log('App组件实例创建完成created');
  },
  beforeMount() {
    console.log('App组件模板编译之前beforeMount');
  },
  mounted() {
    console.log('App组件模板编译完成mounted');
  },
  activated() {
    console.log('App组件keep-alive 缓存的组件激活时调用activated');
  },
  deactivated() {
    console.log('App组件keep-alive 缓存的组件停用时调用deactivated');
  },
  beforeUpdate() {
    console.log('App组件模板更新之前beforeUpdate');
  },
  updated() {
    console.log('App组件模板更新完成updated');
  },
  beforeUnmount() {
    console.log('App组件实例销毁之前beforeUnmount');
  },
  unmounted() {
    console.log('App组件实例销毁完成unmounted');
  }
}
</script>

<style lang="scss">
  $width:600px;
  $color1:#ccc;
  $color2:#888;

  html,body,ul,li,img {
    margin:0px;
    padding:0px;
  }

  .container {
    width:$width;
    background:$color1;
    height:600px;
    margin:0 auto;
  }
  header {
    float:left;
    width:$width;
    height:80px;
    background:$color2;
  }

  .main {
    width:100%;
    min-height:300px;
    background: yellow;
    clear: both;
  }
  footer {
    clear: both;
    width:100%;
    min-height:100px;
    background: green;
  }

  .content {
    width:60%;
    float:left;
    background: $color1;
    min-height:300px;
  }

  .sidebar {
    width:40%;
    float:right;
    background: #F0FFF0;
    min-height:300px;
  }

  .nav {
    float:left;
    width:100%;
    height:30px;
    line-height: 30px;
    margin:20px 0;
    background:#F0FFF0;
    ul {

      list-style: none;
      margin:0px;
      padding:0px;
      li {
        display: inline-block;
        margin:0px 20px;
      }
    }
  }
</style>